import React, { Component } from 'react';
import PropTypes from 'prop-types';
 
// 创建Context对象
const ThemeContext = React.createContext({
  theme: 'light',
  changeTheme: () => {},
});
 
// 高阶组件，用于切换主题
const ThemeToggle = WrappedComponent => {
  class ThemeToggleComponent extends Component {
    state = {
      theme: 'light',
    };
 
    changeTheme = () => {
      this.setState(prevState => ({
        theme: prevState.theme === 'light' ? 'dark' : 'light',
      }));
    };
 
    render() {
      return (
        <ThemeContext.Provider
          value={{
            theme: this.state.theme,
            changeTheme: this.changeTheme,
          }}
        >
          <WrappedComponent {...this.props} />
        </ThemeContext.Provider>
      );
    }
  }
 
  return ThemeToggleComponent;
};
 
// 类组件，使用Context
class MyComponent extends Component {
  static contextType = ThemeContext;
 
  render() {
    return (
      <div>
        Theme: {this.context.theme}
        <button onClick={this.context.changeTheme}>Toggle Theme</button>
      </div>
    );
  }
}
 
// 将MyComponent包装在ThemeToggle中
const ThemeAwareComponent = ThemeToggle(MyComponent);
 
export default ThemeAwareComponent;